<template>
  <div>
    <!-- 通用吧运单列表 2018/6/12 zhangQ -->
    <Row>
      <Form label-position="right" :label-width="90">
        <i-col :span="4">
          <FormItem label="装载种类">
            <Select v-model="tabParam.isContainer" placeholder="请选择集装箱种类" style="width: 200px">
              <Option v-for="item in queryForm" :value="item.isContainer" :key="item.isContainer">{{ item.truckTypeName }}</Option>
            </Select>
          </FormItem>
        </i-col>
        <i-col :span="8" :offset="12">
          <!--<Button type="error" @click="autoDispatchOrder">自动派单</Button>-->
          <!--<Button type="primary" @click="dispatchOrder">手动派单</Button>-->
        </i-col>
      </Form>
    </Row>
    <Row>
      <i-col span="24">
        <Tabs v-model="tabParam.status">
          <template v-for="item in orderStatues">
            <TabPane :label="item.label" :name="item.val"></TabPane>
          </template>
        </Tabs>

        <!--未完成-->
        <tablePage ref="inspectionTab" :api="queryMainOrderListByPage" :param="tabParam" sort-name="endStationTime" sort-type="desc" :isStartLoad="true" v-if="tabParam.status==orderStatues[0].val">
          <template slot-scope="props">
            <Table :columns="inspectionColumnUnfinsih" :data="props.data" @on-sort-change="props.sortChange" border @on-selection-change="mainOrderTabSelectChange"></Table>
          </template>
        </tablePage>

        <!--已完成-->
        <tablePage ref="inspectionTab" :api="queryMainOrderListByPage" :param="tabParam" sort-name="endStationTime" sort-type="desc" :isStartLoad="true" v-if="tabParam.status==orderStatues[1].val">
          <template slot-scope="props">
            <Table :columns="inspectionColumnfinsih" :data="props.data" @on-sort-change="props.sortChange" border @on-selection-change="mainOrderTabSelectChange"></Table>
          </template>
        </tablePage>
      </i-col>
    </Row>

    <xlinkModal v-model="operatModal.viewDetailShow" title="查看详情" width="1200">
      <viewDetailMainOrderList v-if="operatModal.viewDetailShow" :currentMainOrder="mainOrderCurrentRow"></viewDetailMainOrderList>
    </xlinkModal>
    <xlinkModal v-model="operatModal.finishViewDetailShow" title="查看详情" width="1200">
      <viewDetailMainOrderListFinish v-if="operatModal.finishViewDetailShow" :currentMainOrder="mainOrderCurrentRow"></viewDetailMainOrderListFinish>
    </xlinkModal>
    <xlinkModal v-model="operatModal.fleetDispatchShow" title="派单" width="1100">
      <fleetDispatch v-if="operatModal.fleetDispatchShow" :currentMainOrder="mainOrderCurrentRow"></fleetDispatch>
    </xlinkModal>

  </div>
</template>

<script>
  import tablePage from '@components/table/tablePage.vue'
  import {queryMainOrderListByPage} from '@api/backEnd/mainOrder/index'
  import moment from 'moment'
  // import {getTrackCodeByMainOrderNo} from '@api/backEnd/station'
  // import baseInspection from './components/baseInspection'
  import xlinkModal from '@components/modal/xlinkModal'
  import viewDetailMainOrderList from './components/viewDetailMainOrderList'
  import viewDetailMainOrderListFinish from './components/viewDetailMainOrderListFinish'
  import fleetDispatch from './components/fleetDispatch'

  export default {
    name: 'orderListInspection',
    data () {
      let mainOrderCurrentRow = {}
      let operatModal = {
        viewDetailShow: false,
        fleetDispatchShow: false,
        sendNoticeShow: false,
        assignmentOrderShow: false,
        dispatchDriverShow: false,
        viewDetailForFleetShow: false,
        finishViewDetailShow: false
      }
      /* 未完成 */
      let inspectionColumnUnfinsih = [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          title: '联运单号',
          key: 'orderNo',
          width: 200
        },
        {
          title: '车次',
          key: 'endTrainNumber',
          width: 100
        },
        {
          title: '所在股道',
          width: 100,
          render: (h, params) => {
            return (<span>{params.row.paraPositionTrack}</span>)
          }
        },
        {
          title: '到达时间',
          width: 250,
          sortable: true,
          render: (h, params) => {
            let thisdata = params.row.endStationTime
            thisdata = thisdata ? moment(thisdata).format('YYYY-MM-DD HH:mm') : ''
            return (<span>{thisdata}</span>)
          }
        },
        {
          title: '终点站',
          key: 'endStationName',
          width: 250
        },
        {
          title: '派单时间',
          width: 250,
          sortable: true,
          render: (h, params) => {
            let thisdata = params.row.assignmentTime
            thisdata = thisdata ? moment(thisdata).format('YYYY-MM-DD HH:mm') : ''
            return (<span>{thisdata}</span>)
          }
        },
        {
          title: '操作',
          key: 'action',
          align: 'center',
          minWidth: 250,
          render: (h, params) => {
            let viewDetailBtn = (<i-button type="primary" size="small" style="margin-right: 5px;" onClick={() => this.viewDetailAction(params.row)}>查看详情</i-button>)
            let fleetSendSingleBtn = (<i-button type="primary" size="small" style="margin-right: 5px;" onClick={() => this.fleetDispatchAction(params.row)}>派单</i-button>)
            let btnArray = []
            powerUtil.contains('viewDetail') && btnArray.push(viewDetailBtn)
            powerUtil.contains('orderListUnfinishedFleet') && btnArray.push(fleetSendSingleBtn)
            return (btnArray)
          }
        }
      ]
      // 已完成
      let inspectionColumnfinsih = [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          title: '联运单号',
          key: 'orderNo',
          width: 200
        },
        {
          title: '车次',
          key: 'endTrainNumber',
          width: 100
        },
        {
          title: '所在股道',
          width: 100,
          render: (h, params) => {
            return (<span>{params.row.paraPositionTrack}</span>)
          }
        },
        {
          title: '到达时间',
          width: 250,
          sortable: true,
          render: (h, params) => {
            let thisdata = params.row.endStationTime
            thisdata = thisdata ? moment(thisdata).format('YYYY-MM-DD HH:mm') : ''
            return (<span>{thisdata}</span>)
          }
        },
        {
          title: '终点站',
          key: 'endStationName',
          width: 250
        },
        {
          title: '派单时间',
          width: 250,
          sortable: true,
          render: (h, params) => {
            let thisdata = params.row.assignmentTime
            thisdata = thisdata ? moment(thisdata).format('YYYY-MM-DD HH:mm') : ''
            return (<span>{thisdata}</span>)
          }
        },
        {
          title: '操作',
          key: 'action',
          align: 'center',
          minWidth: 250,
          render: (h, params) => {
            let viewDetailBtnFinish = (<i-button type="primary" size="small" style="margin-right: 5px;" onClick={() => this.viewDetailFinishAction(params.row)}>查看详情</i-button>)
            let btnArray = []
            powerUtil.contains('viewDetail') && btnArray.push(viewDetailBtnFinish)
            powerUtil.contains('orderListUnfinishedFleet') && btnArray.push(viewDetailBtnFinish)
            return (btnArray)
          }
        }
      ]
      let orderStatues = [
        {label: '未完成', val: '5'},
        {label: '已完成', val: '6'}
      ]
      let queryForm = [
        {'isContainer': '', 'truckTypeName': '全部'},
        {'isContainer': 1, 'truckTypeName': '集装箱'},
        {'isContainer': 0, 'truckTypeName': '整车运输'}
      ]
      let checkedMainOrder = []
      let tabParam = {startStationCode: '', endStationCode: '', status: orderStatues[0].val}
      let datas = {
        queryMainOrderListByPage,
        queryForm,
        tabParam,
        orderStatues,
        inspectionColumnUnfinsih,
        inspectionColumnfinsih,
        checkedMainOrder,
        operatModal,
        mainOrderCurrentRow
      }
      return datas
    },
    computed: {},
    methods: {
      viewDetailAction (row) {
        this.mainOrderCurrentRow = row
        this.operatModal.viewDetailShow = true
      },
      viewDetailFinishAction (row) {
        this.mainOrderCurrentRow = row
        this.operatModal.finishViewDetailShow = true
      },
      fleetDispatchAction (row) {
        this.mainOrderCurrentRow = row
        this.operatModal.fleetDispatchShow = true
      },
      mainOrderTabSelectChange (rows) {
        this.checkedMainOrder = rows
      },
      /**
       * TODO(手动派单)
       * @auther zhangQ
       * @date 2018/6/12 11:17
       */
      dispatchOrder () {
        if (this.checkedMainOrder.length > 0) {
          // this.operatModal.dispatchModalShow = true
        } else {
          this.$Notice.warning({
            title: '警告',
            desc: '请选择主运单'
          })
        }
      },
      /**
       * TODO(自动派单)
       * @auther zhangQ
       * @date 2018/6/12 11:17
       */
      autoDispatchOrder () {
      }
    },
    created () {
    },
    mounted () {
    },
    watch: {
      tabParam: {
        handler: function (val, oldVal) {
          this.$refs['inspectionTab'].dataRefresh()
          this.checkedMainOrder = []
        },
        deep: true
      }
    },
    components: {
      tablePage, xlinkModal, viewDetailMainOrderList, fleetDispatch, viewDetailMainOrderListFinish
    }
  }
</script>

<style scoped>

</style>
